<template>
  <div ref="chartRef" class="chart"></div>
</template>

<script lang="ts" setup>
import { Ref, onMounted, ref } from "vue";
import { useEcharts } from "../hooks/useEcharts";
import geo from "../json/geo";
import mapping from "../json/mapping";
import continents from "../json/continents";

/*
  组件功能：首先展示七个大洲的数据，点击任意大洲进入到大洲地图显示里面国家数据
*/
const mockContinentData = [
  { name: "亚洲", value: 253 },
  { name: "非洲", value: 41 },
  { name: "北美洲", value: 15 },
  { name: "南美洲", value: 4 },
  { name: "南极洲", value: 0 },
  { name: "欧洲", value: 139 },
  { name: "大洋洲", value: 1 },
];
// 注册 DOM & 地图数据
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useEcharts(
  chartRef as Ref<HTMLDivElement>
);
echarts.registerMap("Worldwide", geo.WorldContinentGeo);
continents.registMap(echarts);

// 加载选项
const baseOptions: echarts.EChartsOption = {
  title:{
    text:"各大洲数据分布",
    subtext:"APT组织分布",
  },
  tooltip:{
    trigger:"item",
    formatter:"{b}<br/>{c}",
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
  visualMap:{
    min: 0,
    max: 253,
    text: ["High", "Low"],
    realtime: false,
    calculable: true,
    inRange: {
      color: ["lightskyblue", "yellow", "orangered"],
    },
  },
  series: [
    {
      name: "世界地图",
      type: "map",
      map: "Worldwide",
      label: {
        show: true,
      },
      data:mockContinentData,
      nameMap: mapping.ContinentsZhMapping,
    },
  ],
};
onMounted(() => {
  // const instance = getInstance();
  // // 每个州对应国家数据
  // instance?.on("click", (_) => {
  //   // 对应州英文名
  //   const continents_en =
  //     Object.keys(mapping.ContinentsZhMapping)
  //       .find((item) => mapping.ContinentsZhMapping[item] === _.name)
  //       ?.replace(/\s/g, "") || "";

  //   // 加载对应州的地图
  //   const refresh = async () => {
  //     // 请求后端数据并返回地图配置
  //     // const data = await getBackendData()
  //     // 注意：在渲染数据的时候需要映射后端返回（可参考 HongKong.vue）
  //     const series = continents_en
  //       ? ({
  //           series: [
  //             {
  //               name: `${_.name}地圖`,
  //               type: "map",
  //               map: continents_en,
  //               // data,
  //               nameMap: mapping.CountryNameZhMapping,
  //               label: {
  //                 show: false,
  //               },
  //             },
  //           ],
  //         } as echarts.EChartsOption)
  //       : {};
  //     setOptions({
  //       ...baseOptions,
  //       ...series,
  //     });
  //   };

  //   refresh();
  // });
  setOptions({ ...baseOptions });
});
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
